<template>
    <button class="ygg-button" :class="classes" :disabled="disabled" :isLang="isLong" @click="onClick">
        <slot>
            <ygg-icon :icon="icon" v-if="icon"/>
            <span v-if="label">
                {{label}}
            </span>
        </slot>
    </button>
</template>

<script>
    import YggIcon from "@/components/ygg-icon";

    export default {
        name: "ygg-button",
        components: {YggIcon},
        props: {
            icon: {type: String},

            label: {type: String},
            status: {type: String, default: 'primary'},
            shape: {type: String, default: 'fillet'},    //形状 round/none
            size: {type: String, default: 'default'},  //大小 large/small
            type: {type: String, default: 'line'},   //类型 fill/line/none

            disabled: {type: Boolean},
            isLong: {type: Boolean},
        },
        data() {
            return {}
        },
        computed: {
            classes() {
                return [
                    `ygg-button-status-${this.status}`,
                    `ygg-button-shape-${this.shape}`,
                    `ygg-button-size-${this.size}`,
                    `ygg-button-type-${this.type}`,
                    {
                        'ygg-button-disabled': this.disabled,    //类型为布尔值的
                        'ygg-button-isLong': this.isLong,
                    },
                ]
            },
        },
        methods: {
            onClick() {
                console.log(1)
            },
        },
    }
</script>

<style lang="scss">

    $key: null;
    $value: null;

    $theme: (
            colorPrimary:#12b4a5,
            colorSuccess:#00CC00,
            colorWarn:#FF7400,
            colorError:#F38585,
            colorInfo:#969696,
            shapeFillet: 4px,
            shapeRound: 80px,
            shapeNone: 0,
            sizeLarge: 40px,
            sizeDefault: 32px,
            sizeSmall: 24px,
            typeFill:black solid 2px,
            typeLine:#46ec1a solid 2px,
            typeNone:#ffffff none 0,
    );

    @function plvar($name) {
        @return map_get($theme, $name)
    }

    //color
    @mixin statusMixin($component) {
        @each $k in (Primary, Success, Warn, Error, Info) {
            $value: plvar(color#{$k}) !global;
            $key: to_lower_case($k) !global;

            &.ygg-#{$component}-status-#{$key} {
                @content;
            }
        }
    }

    //shape
    @mixin shapeMinxin($component) {
        @each $k in (Fillet, Round, None) {
            $value: plvar(shape#{$k}) !global;
            $key: to_lower_case($k) !global;

            &.ygg-#{$component}-shape-#{$key} {
                @content;
            }

        }
    }

    //size
    @mixin sizeMixin($component) {
        @each $k in (Large, Default, Small) {
            $value: plvar(size#{$k}) !global;
            $key: to_lower_case($k) !global;
            &.ygg-#{$component}-size-#{$key} {
                @content
            }

        }

    }

    //type
    @mixin typeMinxin($component) {
        @each $k in (Fill, Line, None) {
            $value: plvar(type#{$k}) !global;
            $key: to_lower_case($k) !global;

            &.ygg-#{$component}-type-#{$key} {
                @content
            }
        }
    }

    .ygg-button {

        border: none;
        display: inline-block;
        color: white;
        height: 32px;
        line-height: 32px;

        @include statusMixin(button) {
            background-color: $value;
        }


        @include shapeMinxin(button) {
            border-radius: $value;
        }

        @include sizeMixin(button) {
            height: $value;
            line-height: $value;
        }
        @include typeMinxin(button) {
            @debug $value;
            border: $value;
        }

        //icon - font
        & > .ygg-icon + span, & > span + .ygg-icon {
            margin-left: 12px;
        }

        //disabled
        &.ygg-button-disabled {
            cursor: not-allowed;
        }

        //isLang
        &.ygg-button-isLong {
            background-color: indianred;
            width: 100%;
        }
    }


</style>
